<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Longmaowalk Sprite Animation</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        
        // 设置画布大小
        canvas.width = 800;
        canvas.height = 400;

        // 精灵图配置
        const spriteImage = new Image();
        spriteImage.src = 'lottie/longmaowalk.png';
        const spriteWidth = 150; // 单个精灵帧的宽度
        const spriteHeight = 150; // 单个精灵帧的高度
        const frameCount = 31; // 精灵图中的帧数
        let currentFrame = 0; // 当前显示的帧数

        // 动画配置
        let xPos = -spriteWidth; // 初始x位置，在画布左侧外
        const speed = 2; // 移动速度

        function animate() {
            // 清空画布
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // 绘制精灵图
            ctx.drawImage(
                spriteImage,
                currentFrame * spriteWidth, 0, // 从精灵图中裁剪的起始位置
                spriteWidth, spriteHeight, // 从精灵图中裁剪的尺寸
                xPos, (canvas.height - spriteHeight) / 2, // 在画布上绘制的位置
                spriteWidth, spriteHeight // 在画布上绘制的尺寸
            );

            // 更新帧数
            currentFrame = (currentFrame + 1) % frameCount;

            // 更新位置
            xPos += speed;

            // 如果动画走出画布右侧，重置位置
            if (xPos > canvas.width) {
                xPos = -spriteWidth;
            }

            // 继续动画循环
            requestAnimationFrame(animate);
        }

        // 等待图片加载完成后开始动画
        spriteImage.onload = function() {
            animate();
        };
    </script>
</body>
</html>